<template>
  <view class="container">
    <web-view :src="url" class="webview"> </web-view>

    <!-- 固定按钮（覆盖在 web-view 上） https://pic.hedashepin.com/upload/3/20250523/d590cd4446bdeb829c6ffb763225d766.png-->
    <cover-view class="fixed-btn" @click="handleButtonClick">
      <cover-image
        src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250306/f76c82683244b5a6ee08e236baa94885.png"
        class="btn-icon"
      ></cover-image>
      <cover-view class="btn-text">分享</cover-view>
    </cover-view>

    <cover-view class="model" v-if="showModel">
      <cover-view class="model-content">
        <!--https://pic.hedashepin.com/upload/3/20250126/fcf59458af13a934059eb284fd1ea7ed.png 上方大图 
        https://pic.hedashepin.com/upload/3/20250504/2034d43c8c655735e540fc3fa241a1c9.png-->
        <cover-image
          class="model-image"
          :src="posterUrl"
          mode="widthFix"
        ></cover-image>

        <!-- 中间三个按钮 -->
        <cover-view class="model-buttons">
          <button class="model-button" open-type="share" @click="shareToFriend">
            <cover-image
              src="@/static/img/weixin.png"
              class="button-icon"
            ></cover-image>
            <cover-view class="button-text">分享好友</cover-view>
          </button>
          <button class="model-button" @click="saveQRCode">
            <cover-image
              src="https://pic.hedashepin.com/upload/3/20250523/eea9ba799e8d7f68d890f65d5e1f3b7c.png"
              class="button-icon"
            ></cover-image>
            <cover-view class="button-text">保存二维码</cover-view>
          </button>
          <button class="model-button" @click="savePoster">
            <cover-image
              src="https://pic.hedashepin.com/upload/3/20250523/2c2104c2811b9f4ef6d1bbc3a441b2a4.png"
              class="button-icon"
            ></cover-image>
            <cover-view class="button-text">保存海报</cover-view>
          </button>
        </cover-view>

        <!-- 底部关闭按钮 -->
        <cover-view class="close-button" @click="closeModel">
          <cover-image
            src="https://pic.hedashepin.com/upload/3/20250430/4c8d735bac0aefdc5c045dbaefeaac44.png"
            class="close-icon"
          ></cover-image>
        </cover-view>
      </cover-view>
    </cover-view>
  </view>
</template>

<script>
var app = getApp();

export default {
  data() {
    return {
      opt: {},
      channel_id: 0,
      loading: false,
      isload: false,
      menuindex: -1,
      showModel: false,
      url: "",
      posterUrl: "",
      qrcodeUrl: "",
      share_title: "",
      share_path: "",
      share_imageUrl: "",
    };
  },

  onLoad: function (opt) {
    if (opt.url) {
      this.url = decodeURIComponent(opt.url);
      this.channel_id = opt.channelId ? opt.channelId : 0;
      this.getdata();
    } else {
      this.opt = app.getopts(opt);
      this.channel_id = this.opt.channelId ? this.opt.channelId : 0;
      this.getUrl();
      this.getdata();
    }
  },

  onShareAppMessage() {
    return {
      title: this.share_title,
      path: this.share_path,
      imageUrl: this.share_imageUrl,
    };
  },

  methods: {
    getUrl() {
      var that = this;
      app.showLoading("加载中");
      app.get(
        "LiveChannel/getWatchUrl",
        { channel_id: that.channel_id },
        function (res) {
          app.showLoading(false);
          if (res.status == 200) {
            that.url = res.data.watch_url;
          } else {
            app.error("获取直播链接失败：" + res.msg);
          }
        }
      );
    },

    getdata() {
      var that = this;
      app.post(
        "LiveChannel/getLivePoster",
        { channel_id: that.channel_id },
        function (res) {
          if (res.status == 200) {
            that.posterUrl = res.data.share_poster;
            that.qrcodeUrl = res.data.share_wxacode;
            that.share_title = res.data.share_title;
            that.share_path = res.data.share_url;
            that.share_imageUrl = res.data.share_banner;
          }
        }
      );
    },

    handleButtonClick() {
      app.showLoading("加载中");
      setTimeout(() => {
        this.showModel = true;
        app.showLoading(false);
      }, 1000);
    },

    closeModel() {
      this.showModel = false;
    },

    shareToFriend() {
      let that = this;
      uni.share({
        title: that.share_title,
        path: that.share_path,
        imageUrl: that.share_imageUrl,
      });
    },

    saveQRCode() {
      this.save(this.qrcodeUrl);
    },

    savePoster() {
      this.save(this.posterUrl);
    },

    //保存
    save(spath) {
      var _this = this;
      var src = spath;
      //#ifdef MP-WEIXIN
      //提前向用户发起授权请求
      uni.authorize({
        scope: "scope.writePhotosAlbum",
        success() {
          console.log("dp-previewImage:允许储存");
          _this.downloadImg(src);
        },
      });
      //#endif

      //#ifdef APP-PLUS
      _this.downloadImg(src);
      //#endif

      //#ifdef H5
      //非同源图片将直接打开
      var abtn = document.createElement("a");
      abtn.href = src;
      abtn.download = "";
      abtn.target = "_blank";
      abtn.click();
      //#endif
    },

    //下载并保存文件
    downloadImg(src) {
      //下载图片文件
      uni.showLoading({
        title: "大图提取中",
      });
      uni.downloadFile({
        url: src,
        success: function (res) {
          console.log("dp-previewImage:下载成功");
          uni.hideLoading();
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: () => {
              uni.showToast({
                title: "已保存至相册",
                duration: 1000,
              });
            },
          });
        },
        fail: function () {
          uni.hideLoading();
          uni.showToast({
            title: "图片下载失败",
            icon: "none",
            duration: 1000,
          });
        },
      });
    },
  },
};
</script>

<style>
.container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.webview {
  width: 100%;
  height: 100%;
}

/* 固定按钮样式 */
.fixed-btn {
  position: fixed;
  right: 40rpx;
  top: 40rpx;
  /* width: 60px;
  height: 60px; */
  /* background-color: rgba(0, 0, 0, 0.5); */
  border-radius: 20rpx;
  padding: 3rpx 10rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  visibility: visible !important;
}

.btn-icon {
  width: 36rpx;
  height: 36rpx;
}

.btn-text {
  color: white;
  font-size: 30rpx;
  margin-left: 10rpx;
}

/* 蒙版样式 */
.model {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.model-content {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.model-image {
  width: 100%;
  border-radius: 10rpx;
  margin-bottom: 30px;
  max-height: 66vh;
  overflow-y: auto;
}

.model-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  text-align: center;
  justify-content: center;
}

.model-buttons {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 30rpx;
  z-index: 9999999;
}

.button-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

.button-text {
  color: white;
  margin-top: 10rpx;
  font-size: 25rpx;
}

.close-button {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.close-icon {
  width: 100%;
  height: 100%;
}
</style>
